<template>
	<view class="list mt-32">
		<view class="w-f h-112 top-bg ph-32 f ai-c jc-s-b" :class="isTop?'topNav':''">
			<view class="f ai-c jc-s-b f1">
				<view class="f ai-c" @click='showCate=true'>
					<view class="mr-12 fs-28 text-color4">全部分类</view>
					<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
				</view>
				<view class="f ai-c">
					<view class="mr-12 fs-28 text-color4">附近</view>
					<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
				</view>
				<view class="f ai-c" @click='showSort=true'>
					<view class="mr-12 fs-28 text-color4">综合排序</view>
					<u-icon name="arrow-down-fill" color="#CCCCCC" size="6"></u-icon>
				</view>
			</view>
			<!-- <image src="../../static/serve/shadow.png" class="w-16 h-80 ml-16"></image>
            <view class="f ai-c ml-32">
                <image src="../../static/logo.png" class="w-30 h-30 mr-8"></image>
                <view class="fs-28 text-color4">筛选</view>
            </view> -->
		</view>
		<view class="ph-24">
			<view class="box mt-20 b-24 ph-28 pv-28 mb-8" v-for="(item, index) in list" :key="index" @click="toStore(item)">
				<view class="f ai-c jc-s-b">
					<image :src="item.picUrls[0]" v-if="item.picUrls" class="w-180 h-180 mr-24"></image>
					<view class="f f1 fd-c">
						<view class="fs-32 fw-600 text-color4 text-ellipsis-1">{{item.storeName}}</view>
						<view class="f mt-12">
							<image :src="index2 < item.storeScore ? star : starSelect" class="w-24 h-24 mr-8"
								v-for="(item2, index2) in 5" :key="index2"></image>
						</view>
						<view class="f ai-c jc-s-b mt-12">
							<view class="f f1 text-ellipsis-1 fs-26 text-color4">{{item.storeAddress}}{{item.storeAddressDetail}}
							</view>
							<view class="fs-26 text-color3">{{calculateDistance(item.lat,item.lng)}}km</view>
						</view>
						<view class="mt-8">

							<text class="fs-22 text-color3">营业时间：</text>
							<text class="fs-22 text-color4">{{item.storeBusinessHours}}</text>
						</view>
					</view>
				</view>
				<view class="f ai-c jc-s-b mt-12" @click.stop="toDetail(item)">
					<view class="f f1 ai-c">
						<view class="f mr-15 ai-c">
							<view class="w-32 h-28 fs-20 text-color5 f ai-c jc-c mr-8 favour">惠</view>
							<view class="fs-26 fw-600 text-color7 mr-8">¥{{item.price}}</view>
							<view class="w-44 h-28 b-4 fs-20 text-color8 discount">{{item.discountPrice}}折</view>
						</view>
						<view class="f f1 text-ellipsis-1 fs-26 text-color4">{{item.name}} </view>
					</view>
					<view class="fs-26 text-color4">年售{{item.salesCount}}+</view>
				</view>
			</view>
		</view>
		<u-action-sheet :show="showCate" :actions="cateList" title="请选择类型" @close="showCate = false" @select="cateSelect">
		</u-action-sheet>
		<u-action-sheet :show="showSort" :actions="sortList" title="请选择排序" @close="showSort = false" @select="sortSelect">
		</u-action-sheet>

	</view>
</template>
<script setup lang="ts">
	import { ref, toRefs } from 'vue';
	import star from '@/static/index/star.png';
	import starSelect from '@/static/index/star-select.png';
	import { categoryTopList, servicePage } from '@/services/api/serve/index';
	const listQuery = ref({
		pageNo: 1,
		pageSize: 10,
		firstCategoryId: '',
		secondCategoryId: '',
		keyword: '',
		sortField: 'intelligent',
		sortAsc: false,
	});
	const sortList = ref([
		{ name: '综合优先', id: 'intelligent' },
		{ name: '销量优先', id: 'salesCount' },
		{ name: '好评优先', id: 'favorable' },
		{ name: '价格优先', id: 'price' },
	]);
	const cateList = ref<any>([]);
	const list = ref<any>([]);
	const props = defineProps({
		lat: {
			type: Number,
		},
		lng: {
			type: Number,
		},
		isTop:{
			type: Boolean,
		}
	});
	const showCate = ref(false);
	const showSort = ref(false);
	getCate()
	async function getCate() {

		const { data } = await categoryTopList({ type: 1 });
		cateList.value = data;
		getContentPage()
	}

	async function getContentPage() {

		const { data } = await servicePage(listQuery.value);
		list.value = data.list
	}
	const cateSelect = (data : any) => {
		listQuery.value.pageNo = 1;
		listQuery.value.firstCategoryId = data.id;
		list.value = [];
		showCate.value = false
		getContentPage();
	};
	const sortSelect = (data : any) => {

		listQuery.value.pageNo = 1;
		listQuery.value.sortField = data.id;
		// listQuery.value.firstCategoryId = data.id;
		list.value = [];
		showSort.value = false
		getContentPage();
	};
	function toDetail(item : any) {
		uni.navigateTo({
			url: `/pages_serve/productDetails/index?id=${item.id}`,
		});
	}
	function toStore(item : any) {
		uni.navigateTo({
			url: `/pages_shop/business/index?id=${item.storeId}`,
		});
	}
	function onReachBottom() {
		listQuery.value.pageNo++;
		getContentPage();
	}

	function calculateDistance(lat1 : number, lon1 : number) {
		let lat2 : number = props.lat
		let lon2 : number = props.lng
		console.log(lat2, lon2)
		const radians = Math.PI / 180;
		const R = 6371; // 地球半径，单位为千米

		const deltaLat = (lat2 - lat1) * radians;
		const deltaLon = (lon2 - lon1) * radians;

		lat1 = lat1 * radians;
		lat2 = lat2 * radians;

		const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
			Math.cos(lat1) * Math.cos(lat2) *
			Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		const distance = R * c;
		return distance.toFixed(2);
	}
</script>
<style lang="scss" scoped>
	.list {
		.discount {
			background: #fff5f5;
		}

		.favour {
			background: #f54040;
		}

		.box {
			background: #fff;
		}

		.top-bg {
			background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 67%, #f5f5f5 100%);
			border-radius: 24rpx 24rpx 0 0;
		}
	}

	.topNav {
		position: fixed;
		top: 196rpx;
		width: 100%;
		border-radius: 0 !important;
	}
</style>